<template>
	<view class="container" :style="appThemeStyle">
		<u-navbar title="投诉建议" :border-bottom="false" :back-icon-color="appTheme.mainFg" :title-color="appTheme.mainFg" :background="{background:appTheme.mainBg}"></u-navbar>
		<view class="formbox u-flex u-row-center u-col-center">
			<view class="box">
				<view class="inputbox">
					<u-input v-model="formdata.content" type="textarea" placeholder="请输入您的投诉建议" :auto-height="false" />
					<u-upload ref="uUpload1" width="176rpx" height="176rpx" :max-count="3" :size-type="['compressed']" :multiple="true" :max-size="1024*1024" :file-list="fileList" :auto-upload="false" :action="uploadUrl" @on-success="uploadOk" @on-uploaded="postForm" @on-choose-complete="choosePic" @on-remove="removePic"></u-upload>
				</view>
				<u-button :ripple="true" :hair-line="false" type="primary" shape="circle" @click="submitForm">提交</u-button>
				<button class="u-reset-button u-p-30" @click="showList=true">历史记录</button>
				<u-popup v-model="showList" mode="bottom" :closeable="true" z-index="999">
					<scroll-view scroll-y :refresher-triggered="triggered" :refresher-enabled="true" @scrolltolower="onreachBottom" @refresherrefresh="onRefresh" style="width:100vw;height:61.8vh;">
						<u-gap height="60"></u-gap>
						<view class="u-p-30">
							<view v-for="(item,index) in feedback" :key="index">
								<view>{{ item.content }}</view>
								<view class="u-flex u-row-start u-col-center u-flex-wrap u-m-t-10" style="gap:30rpx;">
									<image :src="pic.url" mode="widthFix" v-for="(pic,idx) in item.pic" :key="idx" style="width:210rpx;"  @click="previewImage(item.pic, idx)"></image>
								</view>
								<view class="u-font-xs u-tips-color u-m-t-10">{{ item.create_time }}</view>
							</view>
						</view>
						<u-empty text="暂无记录" mode="favor" v-if="feedback.length==0"></u-empty>
						<u-divider v-if="feedback.length>0 && noData">没有更多了</u-divider>
					</scroll-view>
				</u-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import * as FeedbackApi from '@/api/feedback.js'
	export default {
		data() {
			return {
				formdata: {
					content: '',
					pic: []
				},
				uploadUrl: '',
				isUpload: false,
				fileList: [],
				showList: false,
				triggered: false,
				feedback: [],
				page: 1,
				pageSize: 10,
				noData: false
			}
		},
		onLoad() {
			this.uploadUrl = request.uploadImg
			this.feedbackList()
		},
		methods: {
			previewImage(pic, idx) {
				uni.previewImage({
					current: idx,
					urls: pic.map(item => {
						return item.url
					})
				})
			},
			choosePic() {
				this.isUpload = true
			},
			removePic(index) {
				this.isUpload = true
				if(this.formdata.pic.length > 0){
					this.formdata.pic.splice(index,1)
				}
			},
			uploadOk(data) {
				this.formdata.pic.push(data.id)
			},
			submitForm() {
				if(this.isUpload){
					this.$refs.uUpload1.upload()
				}else{
					this.postForm()
				}
			},
			postForm() {
				FeedbackApi.add({form: this.formdata}).then(data => {
					this.$success('提交成功')
					// 跳转回原页面
					setTimeout(() => uni.navigateBack(), 2000)
				})
			},
			feedbackList() {
				let app = this
				if(app.page==1 && app.triggered==false) {
					uni.showLoading({
						title: '加载中'
					})
				}
				FeedbackApi.feedbackList({
					page: app.page,
					pageSize: app.pageSize,
				}).then(data => {
					if(data.total == data.items.length){
						app.noData = true
					}
					if(data.items.length > 0){
						if(app.page == 1){
							app.feedback = data.items
						}else{
							app.feedback = app.feedback.concat(data.items)
						}
					}else{
						app.noData = true
					}
					uni.hideLoading()
					this.triggered=false
				})
			},
			// 下拉刷新被触发
			onRefresh() {
				this.feedback = []
				this.page = 1
				this.feedbackList()
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(this.noData==false){
					this.page++
					this.feedbackList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		overflow: hidden;
	}
	.formbox {
		width: 100vw;
		height: calc(90vh - 44px);
		background: linear-gradient(to bottom, $main-bg 50rpx, transparent 61.8%);
		.box {
			width: 650rpx;
			.inputbox {
				background-color: #fff;
				border-radius: 30rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;
			}
		}
	}
</style>
